<template>
  <div id="app">
    <keep-alive include="app-service">
      <router-view></router-view>
    </keep-alive>
  </div>
</template>

<script>
  // import Toastr from 'toastr';
  import PerfectScrollbar from 'perfect-scrollbar';

  export default {
    name: 'app',
    created() {
      this.$eventHub.$on('resize', () => {
        this.sp.update();
      });
      window.setInterval(() => {
        this.keepAlive();
      }, 1800000);
    },
    mounted() {
      this.$nextTick(() => {
        this.sp = new PerfectScrollbar('#app', {
          wheelSpeed: 2,
          wheelPropagation: false,
        });
      });
    },
    methods: {
      keepAlive() {
        const token = this.$stateHub.csrf;
        this.$http.request({
          url: 'api/app/security/actions/verify',
          method: 'get',
          data: {
            token,
          },
          transformRequest: [(data) => {
            const encodeToken = encodeURIComponent(data.token);
            return `_csrf=${encodeToken} `;
          }],
        }).then((response) => {
          this.$stateHub.csrf = response.data.csrf;
        }).catch((error) => {
          this.$stateHub.csrf = error.response.data.csrf;
        });
      },
    },
  };
</script>